<template>
  <!-- 头部导航栏 -->
  <div style="height: 6vh; background-color:#fff; padding:10px 20px;">
    <!-- 页面标题 -->
    <span style="line-height:60px; font-size:20px;">新增围栏</span>
    <!-- 返回按钮，点击跳转到 '/geofence' 页面 -->
    <el-button type="primary" style="float:right; margin-top:13px;" @click="router.push('/geofence')">
      返回
    </el-button>
  </div>

  <!-- 百度地图容器 -->
  <div id="mapContainer" style="width: 100%; height: 84vh;"></div>

<!-- 新建围栏弹窗-->
  <el-dialog title="新建围栏" v-model="dialogVisible" :before-close="closeDialog">
    <el-form>
      <el-form-item label="围栏名称" >
        <el-input v-model="geofence.name" placeholder="请输入围栏名称"></el-input>
      </el-form-item>
    </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="savaGeofence">确定</el-button>
      </template>
  </el-dialog>
</template>

<script setup>
// 引入必要的模块和组件
import router from "@/router"; // 路由对象
import {nextTick, onMounted, ref} from "vue"; // Vue 生命周期钩子和 DOM 更新方法
import {DrawScene, DrawControl, OperateEventType} from 'bmap-draw';
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs"; // 百度地图绘制扩展插件

// 定义全局变量用来保存地图对象
var map;
// 定义一个响应式对象 `geofence`，用于保存围栏信息，包含名称和位置信息
const geofence = ref({
  name: '', // 围栏名称，初始为空
  position: {} // 围栏的位置信息，具体结构根据绘制类型（如圆形）动态填充
});


// 组件挂载完成后执行初始化地图操作
onMounted(() => {
  // 确保 DOM 更新完成后再执行地图初始化
  nextTick(() => {
    // 初始化地图，绑定到页面中 id 为 mapContainer 的 div
    map = new BMapGL.Map("mapContainer");

    // 设置地图中心点坐标（经度、纬度）和缩放级别
    let point = new BMapGL.Point(112.913251, 28.209363);
    map.centerAndZoom(point, 15);

    // 创建绘制场景和控件
    const scene = new DrawScene(map); // 创建绘制场景
    const drawContrl = new DrawControl(scene, {
      enableTips: false, // 不显示提示信息
      anchor: BMAP_ANCHOR_TOP_RIGHT, // 控件停靠位置：右上角
      drawingItems: [
        'circle',   // 允许绘制圆形
        'rectangle' // 允许绘制矩形
      ]
    });


    // 监听绘制完成事件，当用户在地图上完成图形绘制后触发该事件
    scene.addEventListener(OperateEventType.COMPLETE, (event) => {
      // 只要用户点击√就出现弹窗选项
      dialogVisible.value = true;
      // 从事件对象中获取绘制完成的覆盖物对象（overlay）
      let overlay = event.target.overlay;

      // 判断绘制的图形是否为圆形（Circle）
      if (overlay instanceof BMapGL.Circle) {
        // 设置围栏类型为 'circle'
        geofence.value.position.type = 'circle';

        // 获取圆心坐标并保存到 geofence 对象中
        geofence.value.position.longitude = overlay.getCenter().lng; // 经度
        geofence.value.position.latitude = overlay.getCenter().lat;  // 纬度

        // 获取圆形半径并保存
        geofence.value.position.radius = overlay.getRadius();

        // 打印当前的 geofence 对象，用于调试或查看数据结构
        console.log(geofence.value);
      }else {
        // 绘制图形为矩形（Rectangle）
        geofence.value.position.type = 'rectangle';
        let recPoints = [];
        for (let i = 0; i < 4; i++){
          recPoints.push(overlay.points[i].latLng.lng+'-'+overlay.points[i].latLng.lat);
        }
        geofence.value.position.recPoints = recPoints.join(',');
        console.log(geofence.value);
      }
    });
    // 将绘制控件添加到地图中
    map.addControl(drawContrl);
  });
});
const dialogVisible = ref(false);
const savaGeofence = () => {
 if (!geofence.value.name || !String(geofence.value.name).trim()) {
    ElMessage.error('请输入围栏名称！');
    return;
  }
  //由于geofence的position也是也是一个对象，所以需要先将position转换为JSON格式，再将geofence转换为JSON格式
  geofence.value.position = JSON.stringify(geofence.value.position);
  let data = qs.stringify(geofence.value);
  axios.post(BASE_URL + '/v1/geofence/save',data)
        .then((response)=>{
          if(response.data.code === 2000){
            ElMessage.success(response.data.message);
            dialogVisible.value = false;
            router.push('/geofence');
          }else{
            ElMessage.error(response.data.message);
          }
        })
}
const closeDialog = () => {
  if (confirm('您确认关闭吗？')){
    geofence.value.name='';
    dialogVisible.value = false;
    map.clearOverlays();
  }
}
</script>

<style scoped>
/* 当前组件样式，scoped 表示该样式仅作用于当前组件 */
</style>
